<template>
  <div class="content">
    <ul class="flex-box" v-for="(item,index) in list" :key="index">
      <li class="common-border">{{item.types | type}}</li>
      <li style="text-align:center">{{item.account | toType}}</li>
      <li style="width:70px"><img @click.stop="del(item.id)" style="line-height:36px" class="more-icon" src="~assets/img/icon_de@2x.png" alt=""></li>
    </ul>
     <router-link to="/change_cart" tag="div"  class="common-li"><img style="width:22px;margin-right:12px;margin-bottom:2px;height:22px;" src="~assets/img/add.png" alt="提现设置">添加账户</router-link>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
export default {
  data () {
    return {
      type: '银行卡',
      card: '61246887529987623',
      list:[],
      types: ''
    }
  },
  mounted () {
    this.getList()
  },
  filters: {
    toType (str) {
      return `${str.slice(0, 3)}******${str.slice(-3)}`
    },
    type (str) {
      if (str === 0) {
        return '银行卡账户'
      } else if (str === 1) {
        return '支付宝账户'
      }
    }
  },
  methods: {
    getList () {
      this.$apiPost(`user_account_list`, {}
            ).then((data) => {
              this.list = data.data
            })
    },
    del (index) {
      MessageBox.confirm('是否确认解绑此账号?').then(action => {
      this.$apiPost('user_account_delete', {'card_id': index}).then((data) => {
        if (data.code === 0) {
          this.getList()
          MessageBox.alert('解除绑定成功', '提示')
        } else {
          MessageBox.alert('服务器繁忙，请稍后重试', '提示')
        }
      })
      }).catch(() => {})
    }
  }
}
</script>
<style scoped lang='scss'>
.common-li{
  text-align: center
}
</style>
